import { Meta } from '@storybook/addon-docs';

<Meta title="Concepts/Migration/from v0/Components/Box Migration" />

# Box component Migration guide

## Overview:

`Box` component is replaced by `Primitive`.

Before:

```tsx
import { Box } from '@fluentui/react-northstar';
const Component = () => <Box />;
```

After:

```tsx
import { Primitive } from '@fluentui/react-migration-v0-v9';
const Component = () => <Primitive />;
```

## How to migrate props:

| Box props                 | migrate guide                                                                                            |
| ------------------------- | -------------------------------------------------------------------------------------------------------- |
| as, className             | keep it as is                                                                                            |
| content                   | see [Migrate content prop](##migrate-content-prop) in this document                                      |
| variables, design, styles | see [Migrate style overrides](#migrate-style-overrides) in this document                                 |
| accessibility             | see [migrate-custom-accessibility.md](?path=/docs/concepts-migration-from-v0-custom-accessibility--page) |

---

## Migrate `content` prop

Move `content` to JSX children.

Before:

```tsx
import { Box } from '@fluentui/react-northstar';
const Component = () => <Box content="hi" />;
```

After:

```tsx
import { Primitive } from '@fluentui/react-migration-v0-v9';
const Component = () => <Primitive>hi</Primitive>;
```

## Migrate style overrides

⚠️ **If this is your first migration**, please read [the general guide on how to migrate styles](?path=/docs/concepts-migration-from-v0-custom-style-overrides--page).

### Example for migrate boolean `variables`:

Before:

```tsx
// in COMPONENT_NAME.tsx
import { Box } from '@fluentui/react-northstar';

export const Component = () => <Box variables={{ isWideBox: true }} />;

// in box-styles.ts
export const boxStyles1 = {
  root: ({ variables: { isWideBox } }) => ({
    ...(isWideBox && {
      width: '100%',
    }),
  }),
};
```

After:

```tsx
// in COMPONENT_NAME.tsx
import { Primitive } from '@fluentui/react-migration-v0-v9';
import { useStyles } from './COMPONENT_NAME.styles.ts';

export const Component = () => {
  const classes = useStyles();
  return <Primitive className={classes.wideBox} />;
};

// in COMPONENT_NAME.styles.ts
import { makeStyles } from '@fluentui/react-components';

export const useStyles = makeStyles({
  wideBox: {
    width: '100%',
  },
});
```
